<template>
  <div ref="chartRef6" :style="{ width, height }" class="chart"></div>
</template>

<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  const props = defineProps({
    loading: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Array,
      default: () => [],
    },
    color: {
      type: Array,
      default: () => ['#5B8FF9', '#00FFFC', '#F6B13C', '#8E41F6', '#DB6D15'],
    },
    radius: {
      type: String,
      default: () => '60%',
    },
    piePosition: {
      type: Array,
      default: () => ['50%', '50%'],
    },
    legendPosition: {
      type: String,
      default: '14%',
    },
    labelLine: {
      type: Object,
      default: () => ({
        show: false,
        length: 6,
        length2: 8,
        showAbove: true,
      }),
    },
    isAnimation: {
      type: Boolean,
      default: true,
    },
  });
  const chartRef6 = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef6 as Ref<HTMLDivElement>);
  const total = ref<any>(0);
  watch(
    () => props.loading,
    () => {
      if (!props.loading) {
        return;
      }
      //TODO
      initChart();
    },
    {
      immediate: true,
    }
  );

  function initChart() {
    total.value = props.chartData.reduce((pre, cur: any) => {
      return pre + cur.value;
    }, 0);
    setOptions(
      {
        // tooltip: {
        //   trigger: "item",
        //   formatter: function(params) {
        //     var html = params.name + "<br>";
        //     html += params.marker + "数量：" + params.value + "<br>";
        //     html += params.marker + "占比：" + params.percent + "%";
        //     return html + "<br>";
        //   },
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{b} :<br/> {c} ({d}%)',
          padding: [2, 4],
          textStyle: {
            fontSize: 12,
            // lineHeight: 14,
          },
          position: function (point, params, dom, rect, size) {
            // point: 鼠标位置
            // params: 提示框数据
            // dom: 提示框 DOM 元素
            // rect: 图表矩形区域
            // size: 提示框尺寸

            // 强制将提示框显示到右侧
            const x = point[0] + 10; // 右侧偏移量
            const y = point[1];
            return [x, y];
          },
        },
        legend: {
          show: false,
          type: 'plain', // 默认就是 plain 类型，显示为圆圈
          orient: 'vertical',
          left: '55%',
          top: 'center', // 垂直居中
          itemWidth: 6, // 圆圈宽度
          itemHeight: 6, // 圆圈高度
          itemGap: 4, // 图例每项之间的间隔
          icon: 'circle', // 确保使用圆形
          formatter: function (name) {
            const item = props.chartData.find((item) => item?.name === name);
            const percent = total.value === 0 ? 0 : ((item?.value / total.value) * 100).toFixed(1);
            return `{name|${name}}  {percent|${percent}%}`;
          },
          itemStyle: {
            borderWidth: 0, // 去掉圆点的边框
          },
          textStyle: {
            rich: {
              name: {
                color: 'rgba(255,255,255,0.5)',
                fontSize: 12,
              },
              percent: {
                color: '#DBF0FF',
                fontSize: 14,
              },
            },
          },
        },
        grid: {
          left: 0,
          bottom: 0,
          right: 0,
          top: 0,
        },
        series: [
          {
            type: 'pie',
            center: props.piePosition as [],
            radius: '80%', // 空心
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              show: false,
            },
            roseType: 'radius',
            emphasis: {
              // itemStyle: {
              //   shadowBlur: 2,
              //   shadowOffsetX: 0,
              //   shadowColor: 'rgba(0, 0, 0, 0.5)',
              // },
              label: {
                // show: true
                // fontSize: '14',
                // fontWeight: 'bold'
              },
            },
            //animation: props.isAnimation as boolean,
            labelLine: props.labelLine,
            color: props.color as [],
            data: props.chartData as [],
          },
        ],
      },
      true
    );
  }
</script>
